<template>
  <div class="status-component">
    <ul class="status-ul">
      <li class="status-li">
        <div :class="['li-main',statusData.status==1?'current':'']">
          <div class="icon-container">
            <i class="icons el-icon-document" />
          </div>
          <div class="status-title">
            <span class="content">草稿</span>
          </div>
        </div>
        <div class="line" />
      </li>
      <li class="status-li">
        <div :class="['li-main',statusData.status==2?'current':'']">
          <div class="icon-container">
            <i class="icons el-icon-coordinate" />
          </div>
          <div class="status-title">
            <span class="content">待审核</span>
          </div>
        </div>
        <div class="line" />
      </li>
      <li class="status-li" v-if="statusData.status==-3">
        <div :class="['li-main',statusData.status==-3?'current':'']">
          <div class="icon-container">
            <i class="icons el-icon-coordinate" />
          </div>
          <div class="status-title">
            <span class="content">已撤销</span>
          </div>
        </div>
      </li>
      <li v-if="statusData.status!==-3" class="status-li">
        <div v-if="statusData.status!==-1">
          <div :class="['li-main',statusData.status==3?'current':'']">
            <div class="icon-container">
              <i class="icons el-icon-document-checked" />
            </div>
            <div class="status-title">
              <span class="content">审核通过</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div :class="['li-main',statusData.status==-1?'current':'']">
            <div class="icon-container">
              <i class="icons el-icon-document-checked" />
            </div>
            <div class="status-title">
              <span class="content">审核未通过</span>
            </div>
          </div>
        </div>
        <div v-if="statusData.status!==-1" class="line" />
      </li>
      <li v-if="statusData.status!==-3&&statusData.status!==-1" class="status-li">
        <div v-if="statusData.status!==5">
          <div :class="['li-main',statusData.status==4?'current':'']">
            <div class="icon-container">
              <i class="icons el-icon-check" />
            </div>
            <div class="status-title">
              <span class="content">已启用</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div :class="['li-main',statusData.status==5?'current':'']">
            <div class="icon-container">
              <i class="icons el-icon-close" />
            </div>
            <div class="status-title">
              <span class="content">已停用</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    statusData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/assets/scss/views/qualityStandard/modules/status.scss";
</style>
